<template>
  <div class="app-container">
    <div class="view-title">会员充值配置</div>

    <div>
      <el-table :data="tableDataRecharge" style="width: 100%">
        <el-table-column prop="id" label="id" width="80"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="package_code_10" label="10元"> </el-table-column>
        <el-table-column prop="package_code_20" label="20元"> </el-table-column>
        <el-table-column prop="package_code_30" label="30元"> </el-table-column>
        <el-table-column prop="package_code_50" label="50元"> </el-table-column>
        <el-table-column prop="package_code_100" label="100元">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small"
              >编辑</el-button
            >

            <el-button @click="handleDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNow"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 编辑弹窗 -->
    <add-equirty-recharge
      ref="refAdd"
      :editDetails="editDetails"
      :tableDataType="tableDataType"
      :tableDataEquirty="tableDataEquirty"
      @sureDialogAdd="sureDialogAdd"
      @cancelDialogAdd="cancelDialogAdd"
      @handleChangeType="handleChangeType"
    />
  </div>
</template>
<script>
import {
  getAppQyHuafeiConfigList,
  getAppQyHuafeiConfigInfo,
  addAppQyHuafeiConfig,
  updateAppQyHuafeiConfig,
  deleteAppQyHuafeiConfig,
} from "@/api/equirtyMobileRecharge";
import { getAppQyPackageTypeList } from "@/api/equirtyType";
import { getAppQyPackageList } from "@/api/equityManage";
import AddEquirtyRecharge from "./components/addEquirtyRecharge.vue";
export default {
  components: { AddEquirtyRecharge },
  data() {
    return {
      queryParams: {
        pageNow: 1,
        pageSize: 10,
      },
      total: null,
      tableDataRecharge: [],
      editDetails: {},
      tableDataType: [],
      tableDataEquirty: [],
    };
  },
  mounted() {
    this.getAppQyHuafeiConfigList();
  },
  methods: {
    // 获取话费充值配置列表接口
    getAppQyHuafeiConfigList() {
      getAppQyHuafeiConfigList({
        page_now: this.queryParams.pageNow,
        page_size: this.queryParams.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataRecharge = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 查询单条接口
    getAppQyHuafeiConfigInfo(val) {
      getAppQyHuafeiConfigInfo({
        id: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.editDetails = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 编辑接口
    updateAppQyHuafeiConfig(val) {
      updateAppQyHuafeiConfig({
        id: val.id,
        package_code_10: val.package_code_10,
        package_code_20: val.package_code_20,
        package_code_30: val.package_code_30,
        package_code_50: val.package_code_50,
        package_code_100: val.package_code_100,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("编辑成功");
          this.getAppQyHuafeiConfigList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取权益套餐分类列表接口
    getAppQyPackageTypeList() {
      getAppQyPackageTypeList({
        page_now: 1,
        page_size: 20,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataType = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取权益套餐列表接口
    getAppQyPackageList(val) {
      getAppQyPackageList({
        type: val,
        page_now: 1,
        page_size: 100,
      }).then((res) => {
        if (res.code == 1) {
          this.tableDataEquirty = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除接口
    deleteAppQyHuafeiConfig(val) {
      deleteAppQyHuafeiConfig({
        ids: val.id,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success("删除成功");
          this.getAppQyHuafeiConfigList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 编辑
    handleEdit(val) {
      this.getAppQyHuafeiConfigInfo(val);
      this.getAppQyPackageTypeList();
      this.$refs.refAdd.dialogVisibleAdd = true;
    },

    // 编辑确定
    sureDialogAdd(val) {
      this.updateAppQyHuafeiConfig(val);
      this.$refs.refAdd.dialogVisibleAdd = false;
    },

    // 编辑取消
    cancelDialogAdd() {},

    // 编辑分类选择
    handleChangeType(val) {
      this.getAppQyPackageList(val);
    },

    // 删除
    handleDelete(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteAppQyHuafeiConfig(val);
        })
        .catch(() => {});
    },

    // 分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.queryParams.pageNow = 1;
      this.getAppQyHuafeiConfigList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageSize = 10;
      this.queryParams.pageNow = val;
      this.getAppQyHuafeiConfigList();
    },
  },
};
</script>
<style scoped lang="scss">
.add_box {
}
</style>
